<template>
  <a-select v-model:value="selected" placeholder="选择费用类型" style="min-width: 100px">
    <a-select-option v-for="option in options" :key="option.uid" :value="option.uid"
      >{{ option.name }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useHttpRequest } from '@/api/chunfeng/apiRequest'
import { useExpenseTypeApi } from '@/api/chunfeng/finance/expense-type'

interface Option {
  name: string
  uid: string
}

export default defineComponent({
  name: 'ExpenseTypeSelection',
  props: {
    value: {
      type: String,
      required: false,
      default: '',
    },
  },
  emits: ['expenseTypeSelected'],
  setup(props, context) {
    const selected = ref(props.value)
    const options = ref(Array<Option>())
    watch(
      () => props.value,
      (newValue) => {
        selected.value = newValue
      },
    )
    watch(selected, (newValue) => {
      context.emit('expenseTypeSelected', newValue)
    })

    const { executeQueryRequest } = useHttpRequest()
    const { queryExpenseType } = useExpenseTypeApi()

    executeQueryRequest(queryExpenseType({ enabled: true }), (data: Option[]) => {
      options.value.push(...data)
    })

    function reset() {
      selected.value = ''
    }

    return {
      selected,
      options,
      reset,
    }
  },
})
</script>

<style scoped>
.brand-select {
  width: 70px;
}
</style>
